<h3>Text</h3>
<div style="float: left;width:30%;">
    <canvas id="myCanvas_text"  width="200px" height="200px" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<div style="float: left;padding:0% 1% 1% 1%;width:68%;">
<textarea style="width: 100%;height: 300px;" id="code_text">
var c=document.getElementById("myCanvas_text");
c.width = c.width; //reset canvas

var ctx=c.getContext("2d");   
//ctx.clearRect(0, 0, c.width, c.height); //clear 
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";

// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

</textarea>
<input type="button" value="run" onclick="run_code('#code_text')" />
    
</div>


<script type="text/javascript">
<!--
    $(function(){
	   run_code('#code_text');
	})
-->
</script>

